import React, { PureComponent } from "react";

import { Button, Space } from "antd";
import { PoweroffOutlined } from "@ant-design/icons";
import "antd/dist/antd.css";

export default class App extends PureComponent {
  state = {
    loadings: [],
  };
  render() {
    const { loadings } = this.state;
    return (
      <div>
        <>
          <Space style={{ width: "100%" }}>
            <Button type="primary" loading>
              Loading
            </Button>
            <Button type="primary" size="small" loading>
              Loading
            </Button>
            <Button type="primary" icon={<PoweroffOutlined />} loading />
          </Space>

          <Space style={{ width: "100%" }}>
            <Button
              type="primary"
              loading={loadings[0]}
              onClick={() => this.enterLoading(0)}
            >
              Click me!
            </Button>
            <Button
              type="primary"
              icon={<PoweroffOutlined />}
              loading={loadings[1]}
              onClick={() => this.enterLoading(1)}
            >
              Click me!
            </Button>
            <Button
              type="primary"
              icon={<PoweroffOutlined />}
              loading={loadings[2]}
              onClick={() => this.enterLoading(2)}
            />
          </Space>
        </>
      </div>
    );
  }
}
